<template>
  <div style="height: 100%">
    <el-button type="primary" class="m_bottom10" @click="show_copy_box = true"
      >复制到企业</el-button
    >
    <div class="container_main">
      <div>
        <rule_list :rule_type="1"></rule_list>
        <number_list :rule_type="1"></number_list>
      </div>
      <p>=></p>
      <div>
        <require_list :rule_type="1"></require_list>
      </div>
    </div>
    <el-drawer
      v-model="show_copy_box"
      direction="rtl"
      size="30%"
      :close-on-click-modal="false"
      @close=";(show_copy_box = false), (enterpriseId = '')"
    >
      <template #title>
        <h4>复制到企业</h4>
      </template>
      <template #default>
        <el-select
          v-model="enterpriseId"
          filterable
          style="width: 100%"
          remote
          reserve-keyword
          placeholder="请输入"
          :remote-method="remoteMethod"
          @change="
            enterprise_list.forEach((item) => {
              item.disabled = false
            })
          "
        >
          <div v-for="item in enterprise_list" :key="item.id">
            <el-option
              v-if="!item.disabled"
              :value="item.id"
              :label="item.name"
            ></el-option>
          </div>
        </el-select>
        <div class="tr m_top10">
          <el-button @click=";(enterpriseId = ''), (show_copy_box = false)"
            >取消</el-button
          ><el-button type="primary" @click="copy_submit">确定</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import rule_list from './component/rule_list.vue'
import number_list from './component/number_list.vue'
import require_list from './component/require_list.vue'
import axios from '@/service/HttpRequest'
import serviceApi from '@/service/api'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useStore } from 'vuex'
const store = useStore()
const copy_submit = () => {
  if (enterpriseId.value == '') {
    ElMessage.error('请选择企业')
    return
  }
  ElMessageBox.confirm(
    '复制后该企业原有模板编号规则将被覆盖，确定将模板编号规则复制到该企业吗？',
    '提示',
    {
      cancelButtonText: '取消',
      confirmButtonText: '确定',
      closeOnClickModal: false,
      type: 'warning',
    }
  )
    .then(() => {
      axios
        .request({
          url: serviceApi.number_template_copy,
          method: 'post',
          params: { enterpriseId: enterpriseId.value, type: 1 },
        })
        .then(() => {
          ElMessage.success('操作成功！')
          enterpriseId.value = ''
          show_copy_box.value = false
        })
        .catch((err) => {
          ElMessage.error(err)
        })
    })
    .catch(() => {})
}
const remoteMethod = (e) => {
  enterprise_list.value.forEach((item) => {
    if (!item.name.includes(e)) {
      item.disabled = true
    } else {
      item.disabled = false
    }
  })
}
const show_copy_box = ref(false)
const enterprise_list = computed(() => {
  return store.state.enterprise_list.filter((item) => {
    return item.enterpriseLevelList.some((item1) => {
      return item1.productId == 2 && (item1.levelId == 3 || item1.levelId == 4)
    })
  })
})
const enterpriseId = ref('')
</script>

<style lang="scss" scoped>
.container_main {
  display: flex;
  align-items: center;
  height: calc(100% - 40px);
  background-color: #fff;
  > div:first-child {
    width: 48%;
    height: 100%;
  }
  > div:last-child {
    height: 100%;
    width: 49%;
    > div {
      height: 100%;
      width: 100%;
    }
  }
}
</style>
